<template>
  <div class="" style="height: 100%; width: 100%">
    <tongyongbasechart :options="options" ref="reffuhe" />
  </div>
</template>
<script>
export default {
  name: "guolushihsibeijingchart",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.guolushishi": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;
    this.options = {
      color: ["#9AE48D", "#EEC113", "#6A65D4", "#2BCDFF"],
      title: {
        text: "锅炉实时燃气消耗量(m³)",
        // top: "10%"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },

      legend: {
        type: "scroll",
        // data: Line,
        // itemWidth: 18,
        // ite mHeight: 12,
        top: "10%",
        data: ["一号锅炉", "二号锅炉", "三号锅炉", "四号锅炉"],
        textStyle: {
          color: "#F5F5F5",
          fontSize: 28 * scale,
          // padding: [15, 0, 0, 0],
        },
      },
      toolbox: {
        feature: {},
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        top: "30%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["0", "2", "4", "6", "8", "10", "12"],
          axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
          textStyle: {
            color: "#ffffff",
            fontSize: 30 * scale,
          },
        },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
          inside: false,
          interval: 0, //【2019年11月6日】需要全部显示出来 线上的点也才会都在
          textStyle: {
            color: "#fff", // x轴颜色
            fontWeight: "normal",
            fontSize: 30 * scale,
            // lineHeight: 22
          },
        },
        },
      ],
      series: [
        {
          name: "一号锅炉",
          type: "line",
          stack: "总量",
          smooth: true,
          areaStyle: {},
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "二号锅炉",
          type: "line",
          smooth: true,
          stack: "总量",
          areaStyle: {},
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "三号锅炉",
          type: "line",
          smooth: true,
          stack: "总量",
          areaStyle: {},
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "四号锅炉",
          type: "line",
          smooth: true,
          stack: "总量",
          label: {
            normal: {
              show: true,
              position: "top",
            },
          },
          areaStyle: {},
          data: [220, 332, 301, 134, 290, 330, 200],
        },
      ],
    };
  },
  methods: {
    loadData(n) {
      let scale = this.$root.setting.scale;
      this.options.series = [];
      let resarr = {};
      /**
       *
       */
      n.map((item) => {
        if (resarr[item.name]) {
          resarr[item.name][item.aligntime] = item.m_001fgq;
        } else {
          resarr[item.name] = {};
          resarr[item.name][item.aligntime] = item.m_001fgq;
        }
      });

      let datakey = [];

      Object.keys(resarr).map((item) => {
        this.options.series.push({
          name: item,
          type: "line",
          smooth: true,
          stack: "总量",
          areaStyle: {},
          data: [],
        });

        datakey = Object.keys(resarr[item]);
        Object.keys(resarr[item]).map((key) => {
          this.options.series[this.options.series.length - 1].data.push(
            resarr[item][key]
          );
        });
      });

      (this.options.xAxis = [
        {
          type: "category",
          boundaryGap: false,
          data: datakey,
        },
      ]),
        this.$refs.reffuhe.myChart.setOption(this.options);
      // this.options
    },
  },
};
</script>
<style lang='scss' scoped>
</style>